<template>
  <div>
    <!-- 头部img -->
    <header>
      <van-button
        icon="/img/left1.png"
        to="/Curriculums"
        class="button"
      ></van-button>
      <div class="kong"></div>
    </header>
    <div class="geduan"></div>
    <div class="banner">
      <van-image
        width="100%"
        height="100%"
        src="	https://ksimg.sparke.cn/images/english/2021/6/1276136926568485120.jpg"
      />
    </div>
    <div class="det-list">
      <div class="list-title">【限时特价】四级过级包·暑假班</div>
      <div class="list-time">
        <span class="det-tit">时间</span>
        <span>2021.07.19~12.09 开课</span>
        <span>|</span>
        <span>152课时</span>
      </div>
      <div class="list-time">
        <span class="det-tit">老师</span>
        <span>邵雯</span>
        <span>胡贻铸</span>
        <span>陈昊</span>
        <span>李萌</span>
        <span>宋小明</span>
        <span>蔡任</span>
      </div>
      <div class="list-time det-btn-bot">
        <span class="det-tit">选课</span>
        <div class="pagination">
          <a
            href="#"
            :class="Change == 'a' ? 'active' : 'pagination'"
            @click="show(Home)"
            >四级暑假班
          </a>
          <a
            href="#"
            :class="Change == 'b' ? 'active' : 'pagination'"
            @click="show(Link)"
            >六级暑假班
          </a>
        </div>
      </div>
      <div class="list-time">
        <div class="xiangou">
          <span class="det-tit">限购5000人</span>
          <span class="det-tit">已有4228人购买</span>
        </div>
      </div>
    </div>
    <!-- 标签页start -->
    <van-tabs
      color="#4c84ff"
      title-inactive-color="#c3c7cb"
      title-active-color="#222831"
      style="padding-bottom: 4.375rem"
    >
      <van-tab title="课程介绍">
        <div style="padding:15px display:flex">
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071198665685952.gif"
            alt=""
            style="height: 25.81125rem"
          />
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071207255619650.gif"
            alt=""
            style="height: 29.8025rem"
          />
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071207255619648.gif"
            alt=""
            style="height: 17.543125rem"
          />
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071215845555136.gif"
            alt=""
            style="height: 28.798125rem"
          />
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071207255620544.gif"
            alt=""
            style="height: 20.09875rem"
          />
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071215845554240.gif"
            alt=""
            style="height: 35.774375rem"
          />
          <img
            src="https://ksimg.sparke.cn/images/english/2021/8/1328071215845555138.jpg"
            alt=""
            style="height: 30.261875rem"
          />
        </div>
      </van-tab>
      <van-tab title="目录">
        <div class="catalog">
          <div class="row">
            <div class="serial">1.</div>
            <div>
              <div>听力备考规划</div>
              <div>邵雯 2021-07-05 19:00开课</div>
            </div>
          </div>
          <div class="row">
            <div class="serial">2.</div>
            <div>
              <div>翻译备考规划</div>
              <div>宋小明 2021-07-06 19:00开课</div>
            </div>
          </div>
          <div class="row">
            <div class="serial">3.</div>
            <div>
              <div>写作备考规划</div>
              <div>李萌 2021-07-07 19:00开课</div>
            </div>
          </div>
          <div class="row">
            <div class="serial">4.</div>
            <div>
              <div>阅读备考规划</div>
              <div>胡贻铸 2021-07-12 19:00开课</div>
            </div>
          </div>
          <div class="row">
            <div class="serial">5.</div>
            <div>
              <div>外刊备考规划</div>
              <div>蔡任 2021-07-13 19:00开课</div>
            </div>
          </div>
          <div class="row">
            <div class="serial">6.</div>
            <div>
              <div>词汇备考规划</div>
              <div>陈昊 2021-07-14 19:00开课</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="讲师教室">
        <div class="recommend">
          <img
            class="photo"
            src="https://ksimg.sparke.cn/images/english/2020/9/1081832812254923584.jpg"
          />
          <div class="list">
            <span>邵雯</span>
            <span>
              12年英语类考试培训经验，对教学法和测试学研究深入
              打造多门经典课程，学员数以百万
              创立听力“天聋八步”“倍速听力”“精听大法”等解题秘籍
              独创Point-Line-Plane-Space阅读法和“逐字稿检测式”笔记法
              知名教育博主，全网粉丝超400万
              21世纪英文报专栏作者，中国教育在线、新浪等媒体考试点评嘉宾
            </span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="https://ksimg.sparke.cn/images/english/2020/1/897072226942627584.jpg"
          />
          <div class="list">
            <span>胡贻铸</span>
            <span>
              9年四六级、考研优秀评卷教师 13年四六级、考研、考博等阅读教学经验
              3年旅美教学经验，金牌讲师 阅读方法：“读孤九见” 阅读解题法
            </span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="https://ksimg.sparke.cn/images/english/2020/9/1081832649046165440.jpg"
          />
          <div class="list">
            <span>陈昊</span>
            <span>
              前新东方四六级、考研词汇主讲 13年词汇、阅读教学经验，托福阅读满分
              课程播放量超三千万 词汇方法：词境结合背词法
            </span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="https://ksimg.sparke.cn/images/english/2020/9/1081832726355577664.jpg"
          />
          <div class="list">
            <span>李萌</span>
            <span>
              21世纪英文报撰稿人 新浪在线教育四六级点评人 前新东方集团优秀教师
              累计授课时长超过一万小时 写作方法：三维建构写作法
            </span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="https://ksimg.sparke.cn/images/english/2020/9/1081832812254923584.jpg"
          />
          <div class="list">
            <span>蔡任</span>
            <span>
              新闻传播学硕士，8年英语教学经验 21世纪杯英语演讲比赛湖南省冠军
              江苏卫视《一站到底》嘉宾 “元气英语”系列课程创始人
              线上学员人次逾百万
            </span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="https://ksimg.sparke.cn/images/english/2020/1/897073747361049472.jpg"
          />
          <div class="list">
            <span>宋小明</span>
            <span>
              剑桥大学CELTA认证教师 前新东方四六级翻译核心主讲
              10年教学经验，同学们称他暖男小明 翻译方法：TT翻译法
            </span>
          </div>
        </div>
      </van-tab>
      <van-tab title="评论">
        <!-- 好评度 -->
        <div class="comment">
          <div>全部评论(4)条</div>
          <div class="star">
            好评度 :<van-rate
              v-model="value"
              :size="12"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>4.00</span>
          </div>
        </div>
        <!-- 评价 -->
        <div class="recommend">
          <img
            class="photo"
            src="	https://m.sparke.cn/_nuxt/img/ic_icon.a0383f8.png"
          />
          <div class="list">
            <span>188****3196</span>
            <span>太棒了</span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="	https://ksimg.sparke.cn/images/english/2021/7/e0b44369039b4c218ffb00568094ccfe.png"
          />
          <div class="list">
            <span>星河荧耀</span>
            <span> 老师讲的真好，到位！</span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="	https://m.sparke.cn/_nuxt/img/ic_icon.a0383f8.png"
          />
          <div class="list">
            <span>Salnaga</span>
            <span> 星火英语真是业界良心 </span>
          </div>
        </div>
        <div class="recommend">
          <img
            class="photo"
            src="	https://m.sparke.cn/_nuxt/img/ic_icon.a0383f8.png"
          />
          <div class="list">
            <span>183****5366</span>
            <span> 讲的非常好！ </span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 底部 -->
    <div class="buttom-option">
      <div class="free">
        <div>免费</div>
        <div>已有41873人领取</div>
      </div>
      <div class="get">
        <div>
          <img
            src="https://m.sparke.cn/_nuxt/img/ic_chat.f46e924.png"
            alt=""
          />客服
        </div>
        <button @click="receive">立即领取</button>
      </div>
    </div>
  </div>
  <!--标签页end -->
</template>

<style scoped>
header {
  width: 100%;
  height: 2.75rem;
  align-items: center;
  display: flex;
  position: fixed;
  background-color: white;
  z-index: 100;
  top: -0.125rem;
  justify-content: space-between;
}
.button {
  border: 0rem;
}
.van-icon__image {
  width: 1.5625rem;
  height: 1.5625rem;
}
.kong {
  width: 3.5rem;
  height: 3.5rem;
}
/*  */
.geduan {
  height: 2.8125rem;
  width: 100%;
}
/* banner */
.banner {
  border-bottom: 0.03125rem solid rgb(70, 70, 70);
}
/* 详情介绍 */
.det-list {
  display: flex;
  background-color: #fff;
  flex-direction: column;
  position: relative;
}
.list-title {
  padding: 0 0.9375rem;
  margin-top: 1rem;
  color: #222831;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.list-time {
  padding: 0 0.9375rem;
  margin-top: 1rem;
  color: #222831;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  line-height: 1.1875rem;
}
.det-tit {
  color: #c3c7cb;
  margin-right: 0.625rem;
}
.det-list .list-time span {
  margin-right: 0.9375rem;
}

.pagination {
  display: inline-block;
}

.pagination a {
  display: flex;
  align-items: center;
  padding: 0 0.625rem;
  color: black;
  float: left;
  text-decoration: none;
  transition: background-color 0.3s;
  border: 1px solid #ddd;
  margin-right: 0.625rem;
  border-radius: 0.9375rem;
  height: 1.875rem;
  font-size: 0.75rem;
}

.pagination a.active {
  background-color: #e8e8ff;
  color: #5467ff;
  border: 1px solid #e8e8ff;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

.det-btn-bot {
  padding-bottom: 1.25rem;
}
.xiangou {
  height: 2.3125rem;
}
/* 标签页start */

.photo {
  border-radius: 50%;
  width: 2.3125rem;
  height: 2.3125rem;
}
.recommend {
  display: flex;
  padding: 0.9375rem;
}
.list {
  display: flex;
  flex-direction: column;
  margin-left: 0.9375rem;
  text-align: left;
}
.list > :nth-child(1) {
  margin-top: 0.3125rem;
}
.list > :nth-child(2) {
  margin-top: 1.0625rem;
  line-height: 22px;
  font-size: 0.875rem;
}
.comment {
  line-height: 0.75rem;
  font-size: 0.75rem;
  margin: 1.25rem 0.9375rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.star {
  display: flex;
  align-items: center;
}
.star span {
  margin-left: 0.625rem;
}
.catalog {
  display: flex;
  flex-direction: column;
  margin-left: 1.25rem;
  margin-right: 1.875rem;
}
.row {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 0.0625rem solid #edeff0;
}
.serial {
  display: flex;
  align-self: start;
  font-size: 14px;
  font-weight: 600;
  color: #c4cbde;
  line-height: 20px;
  width: 30px;
  height: 20px;
}
.row :nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
/* 标签页end */
/* 底部start */
.buttom-option {
  height: 3.4375rem;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -0.3rem 0.5rem 0 rgb(0, 0, 0, 0.08);
  position: fixed;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8d95a1;
  font-size: 0.75rem;
}
.free {
  text-align: left;
  margin: 0 0 0 0.9375rem;
}
.buttom-option .free :nth-child(1) {
  color: #ff5d32;
  font-size: 1.125rem;
  margin-bottom: 0.3125rem;
}
.get {
  display: flex;
  align-items: center;
}
.get img {
  width: 1.1875rem;
  height: 1.25rem;
  margin-right: 0.375rem;
}
.get button {
  color: #ffffff;
  background-color: #ff5d32;
  font-size: 0.875rem;
  width: 5.9375rem;
  height: 40px;
  font-weight: 700;
  border-radius: 0.09rem;
  border: none;
  margin: 0px 0.9375rem;
}
/* 底部end */
</style>
<script>
export default {
  data() {
    return {
      Change: "a",
      Home: "a",
      Link: "b",
      value: 4
    };
  },
  methods: {
    show(c) {
      this.Change = c;
      // console.log(c);
    },
    receive() {
      if (this.$store.state.phoneState) {
        this.$router.push(`/nonactivated`);
      } else {
        this.$router.push(`/login`);
      }
    }
  }
};
</script>

